import {
  DrawerForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React from 'react';
import { useModel } from 'umi';

type FormProps = {
  visible: boolean;
  current: API.TicketType | undefined;
  parent?: API.TicketType | undefined;
  onCancel: () => void;
  onSubmit: (values: API.TicketType) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, current, parent, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.TicketType> = {};

  if (parent) {
    defaultCurrent = {
      parentId: parent.id,
      productId: parent.productId,
    };
  }

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);
  // console.log(productOptions);

  return (
    <DrawerForm<API.TicketType>
      open={visible}
      initialValues={current ? current : defaultCurrent}
      title={`${current ? '编辑' : '添加'}技术支持分类`}
      autoFocusFirstInput
      width={800}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        mode="multiple"
        name="productId"
        label="产品"
        options={productOptions}
        readonly={parent != null}
        rules={[{ required: true, message: '请选择产品' }]}
      />

      {parent && (
        <ProFormText
          name="parentName"
          label="上级分组"
          readonly={true}
          initialValue={parent?.name}
        />
      )}

      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormTextArea
        name="guide"
        label="处理说明"
        fieldProps={{ rows: 20 }}
      />
      <ProFormDigit name="sort" label="排序" initialValue={0} />
      <ProFormTextArea name="remark" label="备注" />
    </DrawerForm>
  );
};

export default Form;
